<template>
	<view class="search-box">
		<wd-search
			hide-cancel
			placeholder="搜索"
			cancel-txt="取消"
			v-model="queryStore.keyword"
			@focus="focus"
			@blur="blur"
			@search="search"
			@clear="clear"
			@cancel="cancel"
			@change="change"
			maxlength="20"
			class="search"
		/>

		<!-- <wd-icon name="camera" size="48rpx" @click="uploadImage"></wd-icon> -->
	</view>
</template>
<script setup>
import { useQueryStore } from '@/store/query'

const queryStore = useQueryStore()

function focus() {
	console.log('聚焦')
}

function blur() {
	console.log('失焦')
}

function search() {
	console.log('搜索')
	queryStore.name = ''

	uni.navigateTo({
		url: '/pages/category/goodList',
	})
}

function clear() {
	console.log('重置')
}

function cancel() {
	console.log('取消')
}
function change({ value }) {
	console.log('输入', value)
	queryStore.keyword = value
}
// 图搜
const uploadImage = () => {
	uni.navigateTo({ url: '/pages/imageSearch/index' })
}
</script>
<style lang="scss" scoped>
.search-box {
	background-color: #125eda;

	width: 750rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;

	box-sizing: border-box;

	gap: 24rpx;

	.search {
		width: 100%;
	}
}

:deep(.wd-search) {
	background-color: #125eda;
}
</style>
